<template>
    <div>
        <div class="news-container">
            <div class="form-section">
                <el-form ref="formRef" name="news-edit" :model="formState" label-position="top"
                    :validate-messages="{ required: '请输入{label}' }">
                    <el-form-item v-show="false" prop="id">
                        <el-input v-model="formState.id" placeholder="请输入" />
                    </el-form-item>
                    <el-form-item prop="newsTitle" label="新闻标题" :rules="[{ required: true }]">
                        <el-input type="textarea" v-model="formState.newsTitle" placeholder="请输入" :readonly="mode === 'read'" />
                    </el-form-item>
                    <el-form-item prop="classReal" label="新闻标签" :rules="[{ required: true, message: '请选择新闻标签' }]">
                        <el-select v-model="formState.classReal" placeholder="请选择新闻标签" clearable :disabled="mode === 'read'">
                            <el-option v-for="item in classModelList" :key="item.value" :label="item.label"
                                :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item prop="siteName" label="新闻来源">
                        <el-input v-model="formState.siteName" placeholder="请输入" :readonly="mode === 'read'" />
                    </el-form-item>
                    <el-form-item prop="newUrl" label="新闻网址">
                        <el-input v-model="formState.newUrl" placeholder="请输入" :readonly="mode === 'read'" />
                    </el-form-item>
                    <el-form-item prop="abstractReal" label="新闻摘要" :rules="[{ required: true }]">
                        <el-input type="textarea" v-model="formState.abstractReal" placeholder="请输入"
                            :autosize="{ minRows: 5 }" :readonly="mode === 'read'" />
                    </el-form-item>
                    <el-form-item prop="markContent" label="新闻正文">
                        <el-input type="textarea" v-model="formState.markContent" placeholder="请输入"
                            :autosize="{ minRows: 5 }" :readonly="mode === 'read'" />
                    </el-form-item>
                </el-form>
            </div>
            <div class="content-section" v-if="mode === 'read' || mode === 'edit'">
                <div class="content-header">正文内容</div>
                <div>{{ formState.markContent }}</div>
            </div>
        </div>
        <div class="footer">
            <el-button v-if="mode === 'create' || mode === 'edit'" type="primary" @click="handleSubmit(formRef)">保存</el-button>
            <el-button v-if="mode === 'create' || mode === 'edit'">取消</el-button>
            <el-button v-if="mode === 'read'" @click="$emit('close')">关闭</el-button>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { reactive, ref, watch } from 'vue'
import { insertNews, updateNews } from '@/api/newsApi'
import { ElMessage, type FormInstance } from 'element-plus';
import { classModelList } from '@/enums/index'
const { mode, selectNews } = defineProps(['mode', 'selectNews'])
const emit = defineEmits(['close'])
console.log('当前模式:', mode, '选中新闻:', selectNews)

const formRef = ref<FormInstance>()

const formState = reactive({
    id: 0,
    newsTitle: '',
    classReal: 1,
    siteName: '',
    newUrl: '',
    abstractReal: '',
    markContent: ''
})

// 监听selectNews的变化，更新formState
watch(() => selectNews, (newVal) => {
    if (newVal && mode !== 'create') {
        Object.assign(formState, newVal)
        console.log('更新表单数据:', formState)
    } else if (mode === 'create') {
        // 在create模式下重置表单
        formState.id = 0
        formState.newsTitle = ''
        formState.classReal = 1
        formState.siteName = ''
        formState.newUrl = ''
        formState.abstractReal = ''
        formState.markContent = ''
        console.log('重置表单数据:', formState)
    }
}, { immediate: true, deep: true })


const handleSubmit = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            console.log('submit!')
            if (mode === 'create') {
                insertNews({ ...formState, addMode: 1 }).then(res => {
                    console.log('API响应:', res) // 添加调试日志
                    if (res.code === 200) {
                        ElMessage.success(res.message || '添加成功')
                        emit('close')
                    } else {
                        ElMessage.error(res.message || '添加失败')
                    }
                }).catch(error => {
                    console.error('API请求错误:', error)
                    ElMessage.error('请求失败，请稍后重试')
                })
            }
            // if (mode === 'edit') {
            //     updateNews(formState).then(res => {
            //         if (res.data.code === 200) {
            //             ElMessage.success(res.data.message)
            //         }
            //     })
            // }
        }
    })
}
</script>

<style scoped>
.news-container {
    display: flex;
    width: 100%;
}

.form-section {
    width: 50%;
    padding-right: 15px;
    box-sizing: border-box;
}

.content-section {
    width: 50%;
    padding-left: 15px;
    box-sizing: border-box;
}

.content-header {
    font-weight: bold;
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f5f7fa;
    border-radius: 4px;
}
</style>